<template>
    <div class="anime">
        <header>
            <span></span>
            <h2>移动应用推广-腾讯动漫</h2>
        </header>
        <div class="image">
            <img src="../../../assets/img/anime.png" alt="">
        </div>
        <div class="project-introduction">
            <div class="subtitle">
                <span></span>
                <strong>项目介绍</strong> 
            </div>
            <p>中国最大最权威的正版动漫网站，连载众多原创国漫、原创动画、正版日漫等海内外最热正版动漫内容，为上千万动漫爱好者提供漫画、动画、资讯、论坛一站式全方位动漫服务</p>
        </div>
        <div class="promotion-needs">
            <div class="subtitle">
                <span></span>
                <strong>推广需求</strong> 
            </div>
            <p>提升 APP 在应用市场排名，快速增加用户</p>
        </div>
        <div class="promotion-effect">
            <div class="subtitle">
                <span></span>
                <strong>宣传效果</strong> 
            </div>
            <div class="swiper">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="../../../assets/img/anime-aso.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="../../../assets/img/cpt.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="../../../assets/img/cfa.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
            
            <!-- <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide>
                    <div>
                        <img src="../../../assets/img/anime-aso.png" alt="">
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div>
                        <img src="../../../assets/img/cpt.png" alt="">
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div>
                        <img src="../../../assets/img/cfa.png" alt="">
                    </div>
                </swiper-slide>
                <div class="swiper-pagination"  slot="pagination"></div>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
        </swiper> -->
        </div>
    </div>
</template>
<script>
import Swiper from 'swiper'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    naem: 'Anime',
    data () {
        return {
            //  swiperOption: {
            //     notNextTick: true,
            //     // swiper configs 所有的配置同swiper官方api配置
            //     autoplay: 5000,
            //     autoplay:true,
            //     direction : 'horizontal',
            //     // grabCursor : true,
            //     // setWrapperSize :true,
            //     // autoHeight: true,
            //     // pagination: {
            //     //     el: '.swiper-pagination',
            //     // },
            //     // paginationClickable :true,
            //     navigation: {
            //         nextEl: '.swiper-button-next',
            //         prevEl: '.swiper-button-prev',
            //     },
            //     mousewheelControl : true,
            //     observeParents:true,
            //     effect : 'flip',
            //     loop: true,
            //     speed: 500,
            // }
        }
    },
    components: {
        // swiper,
        // swiperSlide
    },
    mounted () {
     new Swiper ('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
        },
        effect : 'slide',
        loop: true,
        speed: 500,
        autoplay: {
            delay: 5000
        }
  })        
  }
}
</script>
<style scoped>
.anime {
    margin-top: 100px;
}
.anime header {
    text-align: center;
}
.anime header span {
    display: inline-block;
    width: 55px;
    height:39px;
    background: url("../../../assets/img/down.png") no-repeat;
    background-size: cover;
}
.anime header h2 {
    font-size: 48px; /*px*/
    color: #1e90ff;
    margin-top: 20px;
}
.anime .image {
    width: 423px;
    height: 277px;
    margin: 74px auto 0;
}
.anime .image img {
    width: 100%;
    height: auto;
}
.anime .project-introduction,.anime .promotion-effect {
    width: 670px;
    margin: 60px auto 0;
}
.anime .project-introduction .subtitle,.anime .promotion-needs .subtitle,.anime .promotion-effect .subtitle {
    display: flex;
}
.anime .project-introduction .subtitle span,.anime .promotion-needs .subtitle span,.anime .promotion-effect .subtitle span {
    width: 6px;
    height: 30px;
    display: inline-block;
    background-color: #1e90ff;
}
.anime .project-introduction .subtitle strong,.anime .promotion-needs .subtitle strong,.anime .promotion-effect .subtitle strong {
    font-size: 36px; /*px*/
    color: #05173b;
    margin-left: 12px;
}
.anime .project-introduction p,.anime .promotion-needs p {
    margin-top: 40px;
    font-size: 30px; /*px*/
    color: #708090;
    margin-left: 18px;
    line-height: 40px;
    display: inline-block;
}
.anime .promotion-needs {
    margin: 60px auto 0;
    width: 670px;
    display: flex;
    flex-direction: column;
}
.anime .promotion-effect .swiper {
    position: relative;
}
.anime .promotion-effect .swiper .swiper-container {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-content: center;
    width: 537px;
}
.anime .promotion-effect .swiper .swiper-container .swiper-slide  img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
</style>
